<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="card" shadow="never">
        <span class="bem"><b>关键字</b></span>
        <el-input
          class="bom"
          placeholder="根据编号搜索"
          v-model="input"
        ></el-input>
        <el-button type="primary" class="butt" @click="searchFn"
          >搜索</el-button
        >
        <el-button class="but" @click="clearFn">清除</el-button>
        <el-alert :title="'一共' + Alert + '条数据'" type="info" show-icon>
        </el-alert>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column fixed prop="id" label="编号" width="200">
          </el-table-column>
          <el-table-column prop="questionType" label="题型" width="80">
            <template slot-scope="scope">{{scope.row.questionType==='1'?'单选':scope.row.questionType==='2'?'多选':'简答'}}</template>
          </el-table-column>
          <el-table-column prop="questionIDs" label="题目编号" width="190" class="blue">
            <template slot-scope="scope">
              <div v-for="(num,index) in scope.row.questionIDs" :key="index" >
                <el-link type="primary" :underline="false" @click="showFn">{{num.number}}</el-link>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="addTime" label="录入时间" width="180">
          </el-table-column>
          <el-table-column prop="totalSeconds" label="答题时间(s)" width="166">
          </el-table-column>
          <el-table-column prop="accuracyRate" label="正确率(%)" width="166">
          </el-table-column>
          <el-table-column prop="userName" label="录入人" width="166">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="80">
            <template v-slot="scope">
              <el-button @click="deleteFn(scope.row.id)" type="text" size="small">
                <i class="el-icon-delete"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          class="pageRight"
          background
          layout="prev, pager, next,sizes, jumper"
          :current-page="form.page"
          :page-size="form.persize"
          :total="Alert"
          :page-sizes="[20, 30, 50, 100]"
          @current-change="currentChangeFn"
          @size-change="sizeChangeFn"
        >
        </el-pagination>
        <quepre v-show="Show" @childShowFn='childShowFn' :dialogVisible='this.Show'></quepre>
      </el-card>
    </div>
  </div>
</template>

<script>
// import { randoms } from '../../api/hmmm/questions'
import { randoms, removeRandoms } from '@/api/hmmm/questions'
import quepre from '../components/questions-preview-one.vue'
export default {
  data () {
    return {
      Show: false,
      tableData: [],
      Alert: 0,
      form: {
        pagesize: 20, // 每页显示多少个
        page: 1,
        keyword: ''
      },
      input: '',
      arr: []
    }
  },
  components: {
    quepre
  },
  created () {
    this.randomsFn()
  },
  methods: {
    async deleteFn (id) {
      await removeRandoms({ id })
      this.randomsFn()
    },
    async randomsFn () {
      const res = await randoms(this.form)
      console.log(res.data)
      this.tableData = res.data.items
      this.Alert = res.data.counts
    },
    // 当前页码改变
    currentChangeFn (val) {
      this.form.page = val // 保存当前要的页码数
      this.randomsFn(this.form)
    },
    // 每页显示条数改变
    sizeChangeFn (val) {
      this.form.page = 1 // 数据返回和页面默认高亮页码
      this.form.pagesize = val // 用户在页面选的一页显示多少条, 保存到参数对象里带给后台
      this.randomsFn(this.form)
    },
    async searchFn () {
      this.form.keyword = this.input
      this.randomsFn()
    },
    clearFn (val) {
      this.input = ''
    },
    showFn () {
      this.Show = true
    },
    childShowFn (val) {
      this.Show = val
      console.log(this.Show)
    }
  }
}
</script>

<style scoped>
.pageRight {
  display: flex;
  justify-content: flex-end;
}
.bom {
  margin-bottom: 20px;
  width: 200px;
}
.bem {
  margin-left: 20px;
  margin-right: 10px;
}
.but {
  position: absolute;
  right: 0;
  margin-right: 30px;
}
.butt {
  position: absolute;
  right: 0;
  margin-right: 110px;
}
.blue{
  color: skyblue;
}
</style>
